import React, { Component } from 'react';
import { Input, Button, Card, Table } from 'antd';
import { connect } from 'dva';
import { PageHeader } from 'ant-design-pro';
import ExportComp from '/common/components/ExportComp';
import SaveBtn from '/common/componentsTpl/ButtonComp/SaveBtn';
import isFunction from 'lodash/isFunction';

const { Search, Group } = Input;

@connect(({ loading }) => ({
  loading,
}))
export default class MainWrap extends Component {

  render() {
    const {
      config = {},
      searchData,
      filterData,
      isLoading = false,

      title,
      headAction,
      headActionOption = {},
      headProps = {},
      renderHead = null,

      list,
      pageInfo,
      table,
      tableProps = {},
      loading = {},

      beforeTable,
      afterTable,

      exportCompProps = {},
      mainCardProps = {},
    } = this.props;
    
    let fAction;
    if (false === headAction) {
      fAction = null;
    } else {
      fAction = headAction ? headAction : (
        <Group>
          {
            false !== headActionOption.search && (
              <span>
              <Search enterButton
                      style={{ width: 200, marginRight: 8 }}
                      placeholder="输入搜索"
                      onSearch={this.props.handleSearch}
                      defaultValue={searchData.search}
              />
            </span>
            )
          }
          {
            false !== headActionOption.add && (
              <SaveBtn type="primary" onClick={this.props.showDetail}>新增</SaveBtn>
            )
          }
          {
            (false !== headActionOption.export || false !== headActionOption.import) && (
              <ExportComp appCode={config.appCode}
                          cn={config.cn}
                          searchData={{
                            fuzzyMatch: searchData.fuzzyMatch,
                            search: searchData.search,
                            filterData: filterData,
                          }}
                // selectedKeys={this.state.checkedList}
                          afterImportCb={this.props.fetchList}
                          {...exportCompProps}
              />
            )
          }
        </Group>
      );
    }

    const { effects, models } = loading;
    const { modelName } = config;
    let modelLoading = models[modelName];
    let showHideLoading = !!effects[`${modelName}/showDetail`]
      || !!effects[`${modelName}/hideDetail`]
      || !!effects[`${modelName}/fetchDetail`];
    let tmpLoading = modelLoading && !showHideLoading;
    const loadingList = tmpLoading || isLoading;

    return (
      <div className="main-wrapper">
        {
          isFunction(renderHead) ? renderHead() : (
            <PageHeader title={title || config.cn}
                        breadcrumbList={config.breadcrumbList}
                        action={fAction}
                        {...headProps}
            />
          )
        }
        <Card className='main-body' bodyStyle={{ padding: 16 }} {...mainCardProps}>
          {beforeTable}
          {
            false !== table && (
              table ? table : (
                <Table
                  loading={loadingList}
                  dataSource={list}
                  pagination={pageInfo}
                  bordered={true}
                  {...tableProps}
                />
              )
            )
          }
          {afterTable}
          {
            this.props.children
          }
        </Card>
      </div>
    );
  }
}
